<template>
    <view class="container">
        <!-- 顶部导航 - 添加fixed类 -->
        <view class="header fixed">
            <view class="logo">
                <u-image src="/static/logo.png" width="277rpx" height="80rpx" mode="aspectFit"></u-image>
               
            </view>
        </view>
        <!-- 占位元素，防止内容被fixed导航遮挡 -->
		<view class="header-placeholder"></view>
         <view class="content">
            <!-- 商品图片轮播 -->
            <view class="product-swiper">
                <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="1000">
                    <swiper-item v-for="(item, index) in productImages" :key="index">
                        <image :src="item" mode="aspectFill" @click="previewImage(index)"></image>
                    </swiper-item>
                </swiper>
            </view>

            <!-- 商品基本信息 -->
            <view class="product-info">
                <view class="price-box">
                    <text class="price">¥{{price}}</text>
                    <text class="original-price">¥{{originalPrice}}</text>
                </view>
                <view class="title-box">
                    <text class="title">{{title}}</text>
                </view>
              
            </view>

            <!-- 商品参数 -->
            <!-- <view class="product-params">
                <view class="param-title">商品参数</view>
                <view class="param-list">
                    <view class="param-item" v-for="(item, index) in params" :key="index">
                        <text class="label">{{item.label}}</text>
                        <text class="value">{{item.value}}</text>
                    </view>
                </view>
            </view> -->

            <!-- 商品详情 -->
            <view class="product-detail">
                <view class="detail-title">商品详情</view>
                <view class="detail-content">
                    <u-parse :content="content"></u-parse>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '标题',
                list: [{
                        name: '选项一',
                        subname: "选项一描述",
                        color: '#ffaa7f',
                        fontSize: '20'
                    },
                    {
                        name: '选项二禁用',
                        disabled: true
                    },
                    {
                        name: '开启load加载', //开启后文字不显示
                        loading: true
                    }
                ],
               website:'http://www.bai.sh',
                content:`
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`, // 富文本内容
                detailId: '', // 详情ID
                productImages: [],
                price: 0,
                originalPrice: 0,
                tags: [],
                params: [],
                isFavorite: false,
            };
        },
        onLoad(options) {
            if (options.id) {
                this.detailId = options.id;
                this.getDetailContent();
            }
        },

        methods: {
            handleNavClick(index, item) {
                this.currentNav = index;
                // 获取对应路由
                const route = this.navRoutes[item];
                if (route) {
                    uni.navigateTo({
                        url: route,
                        fail: (err) => {
                            // 如果页面已经在栈中，使用switchTab
                            uni.switchTab({
                                url: route
                            });
                        }
                    });
                }
            },
            // 获取详情内容
            async getDetailContent() {
                try {

                    uni.$u.http.get('/content/'+this.detailId).then(res => {
                        console.log('/list/5/page/1', res)
                        let data = res.data
                        
                        this.productImages = ['https://cdn.uviewui.com/uview/swiper/2.jpg'];
                        this.title = data.title;
                        this.content = this.formatRichText(data.content);
                        this.price = data.ext_price;
                     
                        
                    }).catch(err => {
                        console.log('失败', err)
                    })
                    // const res = await uni.request({
                    //     url: 'your_api_url/detail',
                    //     data: { id: this.detailId }
                    // });
                    
                    if (res.data) {
                        const detail = res.data;
                        
                    }
                } catch (err) {
                    uni.showToast({
                        title: '获取内容失败',
                        icon: 'none'
                    });
                }
            },

            // 格式化富文本内容
            formatRichText(html) {
                // 处理图片宽度，使其自适应
                let newContent = html.replace(/<img[^>]*>/gi, (match) => {
                    return match.replace(/style="[^"]+"/gi, 'style="max-width:100%;height:auto;"');
                });

                // 处理视频
                newContent = newContent.replace(/<video[^>]*>/gi, (match) => {
                    return match.replace(/style="[^"]+"/gi, 'style="width:100%;"');
                });

                return newContent;
            },

            previewImage(index) {
                uni.previewImage({
                    urls: this.productImages,
                    current: index
                });
            },

            toggleFavorite() {
                this.isFavorite = !this.isFavorite;
                // 调用收藏API
            },

            addToCart() {
                // 添加购物车逻辑
                uni.showToast({
                    title: '已加入购物车',
                    icon: 'success'
                });
            },

            buyNow() {
                // 立即购买逻辑
                uni.navigateTo({
                    url: '/pages/order/confirm'
                });
            },

            goToService() {
                // 客服逻辑
            }
        }
    };
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
    }

    .header {
        padding: 20rpx 30rpx;
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;


        &.fixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
        }

        .logo {
            display: flex;
            margin-bottom: 20rpx;
            flex-direction: column;

            text {
                margin-left: 10rpx;
                font-size: 32rpx;
                font-weight: bold;
            }
        }

        
    }

    // 添加占位元素样式
    .header-placeholder {
        height: 190rpx; // 根据header实际高度调整
        width: 100%;
    }

    .product-swiper {
        width: 100%;
        height: 750rpx;

        .swiper {
            width: 100%;
            height: 100%;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .product-info {
        padding: 20rpx 30rpx;
        background: #fff;

        .price-box {
            .price {
                font-size: 40rpx;
                color: #ff6b81;
                font-weight: bold;
            }

            .original-price {
                font-size: 24rpx;
                color: #999;
                text-decoration: line-through;
                margin-left: 20rpx;
            }
        }

        .title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20rpx 0;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                flex: 1;
            }

            .share-btn {
                background: none;
                padding: 0;
                margin: 0;
                line-height: 1;
                
                &::after {
                    border: none;
                }
            }
        }

        .tags {
            text {
                display: inline-block;
                padding: 4rpx 16rpx;
                background: #fff1f0;
                color: #ff6b81;
                font-size: 24rpx;
                margin-right: 20rpx;
                border-radius: 4rpx;
            }
        }
    }

    .product-params {
        margin-top: 20rpx;
        padding: 30rpx;
        background: #fff;

        .param-title {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .param-item {
            display: flex;
            padding: 16rpx 0;
            font-size: 28rpx;
            border-bottom: 1rpx solid #eee;

            .label {
                color: #666;
                width: 200rpx;
            }

            .value {
                flex: 1;
            }
        }
    }

    .product-detail {
        margin-top: 20rpx;
        padding: 30rpx;
        background: #fff;

        .detail-title {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);

        .left-btns {
            display: flex;
            
            .btn-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 40rpx;
                
                text {
                    font-size: 20rpx;
                    color: #666;
                }
            }
        }

        .right-btns {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            
            button {
                width: 200rpx;
                height: 70rpx;
                line-height: 70rpx;
                font-size: 28rpx;
                margin-left: 20rpx;
                
                &.add-cart {
                    background: #ffd6d9;
                    color: #ff6b81;
                }
                
                &.buy-now {
                    background: #ff6b81;
                    color: #fff;
                }
            }
        }
    }


</style>